<template>
  <div class="container">
    <div class="panel-box">
      <div class="header">
        <div class="line"></div>
        <div class="text">数据概览</div>
      </div>
      <el-row :gutter="60" class="panel-group">
        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
          <div class="cardBox" style="background-color: #fff4f5">
            <div class="left">
              <img src="@/assets/images/person1.png" class="img">
              <div class="key" style="color:#fa6767;">总人数</div>
            </div>
            <div class="line"></div>
            <div class="right">
              <div class="value" style="color:#fa6767;">{{statisticData.allCount}}</div>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
          <div class="cardBox" style="background-color: #f4f4ff">
            <div class="left">
              <img src="@/assets/images/person2.png" class="img">
              <div class="key" style="color:#8e6fc3;">本周新用户</div>
            </div>
            <div class="line"></div>
            <div class="right">
              <div class="value" style="color:#8e6fc3;">{{statisticData.weekCount}}</div>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
          <div class="cardBox" style="background-color: #eafaef" onclick="queryByState(2)">
            <div class="left">
              <img src="@/assets/images/person3.png" class="img">
              <div class="key" style="color:#4dd098;">本周待反馈</div>
            </div>
            <div class="line"></div>
            <div class="right">
              <div class="value" style="color:#4dd098;">{{statisticData.weekUnDealCount}}</div>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
          <div class="cardBox" style="background-color: #eafaef">
            <div class="left">
              <img src="@/assets/images/person3.png" class="img">
              <div class="key" style="color:#4dd098;">本周已反馈</div>
            </div>
            <div class="line"></div>
            <div class="right">
              <div class="value" style="color:#4dd098;">{{statisticData.weekDealCount}}</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="table-box">
      <div class="header">
        <div class="line"></div>
        <div class="text">最新待反馈</div>
      </div>
      <el-table v-loading="loading" :data="userList" class="table">
        <el-table-column label="就诊编号" align="center" prop="code" width="150"/>
        <el-table-column label="真实姓名" align="center" prop="username" />
        <el-table-column label="性别" align="center" prop="gender" width="60" />
        <el-table-column label="年龄" align="center" prop="age" width="60"/>
        <el-table-column label="手机号" align="center" prop="phone" />
<!--        <el-table-column label="身份证号" align="center" prop="identityCard" width="200">-->
<!--          <template slot-scope="scope">-->
<!--            <div disable="disable" style="width: 100%;display: flex;justify-content: center;align-items: center;">-->
<!--              <i class="el-icon-copy-document" style="cursor: pointer" title="复制" @click="copy(userList[scope.$index].identityCard)" />-->
<!--              <span v-show="currentIndex !== scope.$index" ref="start">********</span>-->
<!--              <span v-show="currentIndex === scope.$index" ref="pWord">{{ userList[scope.$index].identityCard }}</span>-->
<!--              <i :ind="scope.$index" class="el-icon-view" style="cursor: pointer" @click="setShow(scope.$index, $event)" />-->
<!--            </div>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column label="状态" align="center" prop="state">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.wx_user_state" :value="scope.row.state"/>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime" width="180">
          <template slot-scope="scope">
            <span>{{ moment(scope.row.createTime).format('YYYY-MM-DD')}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.state==='0'"
              size="mini"
              type="text"
              icon="el-icon-document-checked"
              @click="auditInfo(scope.row)"
              v-hasPermi="['wx:user:auditInfo']"
            >审核</el-button>
            <el-button
              v-if="scope.row.state==='2'"
              size="mini"
              type="text"
              icon="el-icon-thumb"
              @click="processInfo(scope.row)"
              v-hasPermi="['wx:user:processInfo']"
            >处理</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
    import { listAllUser, getStatistic } from "@/api/wechat/user";
    export default {
        name: 'Index',
        dicts: ['wx_user_state','sys_user_sex'],
        data() {
            return {
                statisticData: undefined,
                // 遮罩层
                loading: true,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 字典表格数据
                userList: [],
                // 密码显示隐藏
                show: true,
                //当前行
                currentIndex: null,
                // 查询参数
                queryParams: {
                    params: {
                        stateList: ['0','2']
                    }
                },
            }
        },
        created() {
            this.getStatistic();
            this.getList();
        },
        methods: {
            /** 查询统计信息 */
            getStatistic(){
                getStatistic().then(response=>{
                    console.log(response)
                    this.statisticData = response.data
                })
            },
            /** 查询患者列表 */
            getList() {
                this.loading = true;
                listAllUser(this.queryParams).then(response => {
                    console.log(response)
                        this.userList = response.data;
                        this.loading = false;
                    }
                );
            },


            /** 显示隐藏 */
            setShow(index) {
                if (this.show) {
                    this.currentIndex = index
                    this.show = false
                } else {
                    this.currentIndex = null
                    this.show = true
                }
            },

            /** 复制 */
            copy(shareiot) {
                var input = document.createElement('input')
                input.value = shareiot
                document.body.appendChild(input)
                input.select()
                document.execCommand('Copy')
                document.body.removeChild(input)
                this.$modal.msgSuccess("复制成功");
            },

            /** 去审核 */
            auditInfo(row){
                const userId = row.userId;
                const state = row.state;
                this.$router.push("/wxchat/user/audit/" + userId);
            },

            /** 去处理 */
            processInfo(row){
                const userId = row.userId;
                const state = row.state;
                this.$router.push("/wxchat/user/process/" + userId);
            }

        }
    }
</script>

<style lang="scss" scoped>
  .container {
    width: 100%;
    height: calc(100vh - 84px);
    padding: 10px;
  }
  .panel-box{
    height: 180px;
    width: 100%;
    border: 1px solid #eaeaea;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0px 1px 5px 0px #ccc;
    border: 1px solid white;
  }
  .table-box {
    height: calc(100% - 190px);
    margin-top: 10px;
    width: 100%;
    border: 1px solid #eaeaea;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0px 1px 5px 0px #ccc;
    border: 1px solid white;
    .table{
      overflow-y: scroll;
      height: calc(100% - 25px);
    }
  }

  .header{
    height: 25px;
    width: 200px;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 10px;
    .line{
      width: 5px;
      height: 90%;
      background-color: #00afff;
      margin-right: 10px;
      border-radius: 4px;
    }
    .text{
      line-height: 100%;
      font-weight: 600;
      font-size: 14px;
    }
  }

  .cardBox{
    width: 280px;
    padding: 20px;
    border-radius: 10px;
    margin-right: 50px;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    position: relative;
  }
  .cardBox .left{
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .cardBox .line{
    width: 2px;
    height: 40px;
    background-color: #6c6b6b;
    margin: 0 20px 0 20px;
  }

  .cardBox .left .img{
    width: 65px;
    height: 65px;
    margin: 0 10px 0 10px;
  }


</style>
